<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>login</title>
		<link rel="stylesheet" type="text/css" href="../css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../lib/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
		<style type="text/css">
			* {
				font-family: "微软雅黑";
			}
			
			.head {
				position: fixed;
				top: 0;
				height: 50px;
				width: 100%;
				background: #0096FF;
				font-size: 18px;
				line-height: 50px;
				color: white;
				text-indent: 1rem;
			}
			
			button.weui-vcode-btn {
				color: white;
				background-color:gray;
				font-size: 14px;
			}
			
			.disab {
				opacity: 0.6;
			}
			
			.disab1 {
				opacity: 0.6;
				background-color: #666666;
			}
			
			.placeholder {
				position: relative;
			}
			
			.placeholder img {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			
			.footer {
				width: 100%;
				height: 120px;
				position: fixed;
				bottom: 0;
			}
			.icon-back{
				font-size: 30px;
			}
		</style>
	</head>

	<body>
		<div class="head">
			<span class="iconfont icon-back" style="float: left; display: inline-block; margin-left: -10px;" @click="mayuefanhui"></span>
			<span style="float: right; display: inline-block; margin-right: 10px;">登录</span>
		</div>
		<div class="weui-cells weui-cells_form" style="margin-top: 50px;">
			<div class="weui-cell weui-cell_vcode">
				<div class="weui-cell__hd">
					<label class="weui-label">手机号</label>
				</div>
				<div class="weui-cell__bd">
					<input style="font-size: 14px;" class="weui-input" type="tel" placeholder="请输入手机号" v-model="name" @blur="yanzhengname(name)">
				</div>
				<div class="weui-cell__ft">
					<button class="weui-vcode-btn" :class="{disab:dis}" v-on:click="yzm()" v-html="yanzhengma" v-bind:disabled="dis"></button>
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">密码</label></div>
				<div class="weui-cell__bd">
					<input class="weui-input" style="font-size: 14px;" type="password" placeholder="请输入6-10位数字、字母" v-model="password" @blur="yanzhengpassword(password)">
				</div>
			</div>

		</div>
		<div class="weui-cells__tips">温馨提示：未注册手机号的用户，登录时将自动注册，且代表您已同意
			<a href="javascript:;">《用户服务协议》</a>
		</div>
		<div class="weui-btn-area">
			<button class="weui-btn weui-btn_primary" id="showTooltips" @click="login" :class="{disab1:dis1}" v-bind:disabled="dis1">登录/注册</button>
		</div>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.4/av-min.js"></script>
		<script src="../js/av-min-2.1.2.js" type="text/javascript"></script>
		<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el: "body",
				data: {
					yanzhengma: "获取验证码",
					dis: true,
					dis1: false,
					name: "",
					password: "",
				},
				methods: {
					yzm: function() {
						var _this = this;
						_this.dis = true;
						var i = 60;
						var x = setInterval(function() {
							vue.yanzhengma = "已发送(" + i + "s)";
							i--;
							if(i == 0) {
								clearInterval(x);
								vue.yanzhengma = "获取验证码";
								_this.dis = false;
							}
						}, 1000)

					},
					//点击返回时的函数
					mayuefanhui:function(){
//						location.href="../mine/mine.html"
                         history.go(-1);
					},
					login: function() {
						var _this = this;
						//去这个表里找当前这个账户有没有
						var query = new AV.Query('Userdetails');
						query.contains('name', _this.name);
						query.find().then(function(todo) {
							//判断当前输入的账号有没有，如果有的话就登陆，没有的话注册后在登陆
							if(todo.length > 0) {
								AV.User.logIn(_this.name, _this.password).then(function(loginedUser) {
									console.log("登录成功");
									location.href = "../mine/mine.html"
								}, function(error) {});
							} else {
								console.log("没有这个账户");
									//没有的话在这个表里创建一个账户并注册+登录
								var Todo = AV.Object.extend('Userdetails');
								var todo = new Todo();
								todo.set('name', _this.name);
								todo.set('password', _this.password);
								todo.save().then(function(todo) {
									// 成功保存之后，执行其他逻辑.
								}, function(error) {
									// 异常处理
								});
								var user = new AV.User();
								user.setUsername(_this.name);
								user.setPassword(_this.password);
								user.signUp().then(function(loginedUser) {
									console.log("注册成功");
									AV.User.logIn(_this.name, _this.password).then(function(loginedUser) {
										location.href = "../mine/mine.html"
										console.log("自动登录成功");
									}, function(error) {});
								}, function(error) {

								});
							}
						})
					},
					yanzhengname: function() {
						var _this = this;
						var re = /^[1][34578]\d{9}$/;
						if(re.test(this.name)) {
							_this.dis1 = false;
							_this.dis = false;
						} else {
							_this.dis1 = true;
							_this.dis = true;
							alert("请输入正确手机号！")
						}
					},
					yanzhengpassword: function() {
						var _this = this;
						var er = /^[a-zA-Z0-9]{6,10}$/;
						if(er.test(this.password)) {
							_this.dis1 = false;
						} else {
							_this.dis1 = true;
							alert("密码格式错误！")
						}
					}
				},

			});
		</script>
	</body>

</html>